<template>
    <div>
        <div style="padding: 15px;">
    		<div class="ranking">
    			<div class="rankingItem" v-for="(item, index) in list" :key="index" >
    				<div :class="[0,1,2].includes(index)?'item'+index:'ttt'" class="rankingNum">{{index+1 }}</div>

    				<div class="userName">{{ item.userName }}</div>
    				<div class="number">{{ addCommas(item.points) }}</div>
    			</div>
    		</div>
    	</div>
    </div>
</template>

<script>
export default {
    props: {
         list: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {

        }
	},
	methods: {
		 addCommas(number) {
			return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
		},
	}
}
</script>

<style lang="scss" scoped>
.ttt{
	color:#5C5C5E;
}
.item0{
	color: #EAD641;

}
.item1{
	color: #AAAAAC;
}
.item2{
	color:#F49829;
}
.ranking{
		
		background: rgba(84, 108, 127, 0.1);
		margin:0 auto;
		border: 1px solid rgba(49, 56, 61, 1);
		border-radius: 10px;
		.rankingItem{
			width: calc(100% - 20px);
			height: 42px;
			display: flex;
			margin-left: 20px;
			border-bottom: 1px solid rgba(49, 56, 61, 1);
			font-family: Inter;
			font-size: 13px;
			font-weight: 500;
			.rankingNum{
				width: 10%;
				height: 42px;
				line-height: 42px;
				
			}
			.rank{
				color: #5C5C5E;
				width: 10%;
				height: 42px;
				line-height: 42px;
			}
			.userName{
				width: 70%;
				height: 42px;
				line-height: 42px;
				color: #fff;
				font-size: 13px;
				font-family: 'Regular';
			}
			.number{
				width: calc(25% - 20px);
				height: 42px;
				line-height: 42px;
				color: rgba(193, 227, 255, 1);
				font-size: 13px;
				margin-right: 20px;
			}
		}
		.rankingItem:last-child{
			border: none;
		}
	}
</style>